<template>
  <div>
    <common-card title="今日交易用户数" :value="orderUser">
      <template>
        <v-chart :options="getOptions()"></v-chart>
        <!-- <div
          id="today-users-chart"
          :style="{ width: '100%', height: '100%' }"
        ></div> -->
      </template>
      <template v-slot:footer>
        <span>退货率</span>
        <span class="money">{{ returnRate }}</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import CommonCardMixin from "@/mixins/CommonCardMixin";
import CommonDataMixin from "@/mixins/CommonDataMixin";
export default {
  mixins: [CommonCardMixin,CommonDataMixin],
  methods: {
    getOptions() {
      return this.orderUserTrend.length > 0
        ? {
            color: ["#3398db"],
            series: [
              {
                type: "bar",
                data: this.orderUserTrend,
                barWidth: "60%",
              },
            ],
            xAxis: {
              type: "category",
              data:  this.orderUserTrendAxis,
              show: false,
            },
            yAxis: {
              show: false,
            },
            grid: {
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
            },
            tooltip: {
              trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
          }
        : null;
    },
  },
};
</script>

<style>
</style>